<template>
  <div class="app-container margin-right12">
    <div class="main-page">
      <div class="left-part">
      
      </div>

      <div class="right-part">

        <el-row>
          <el-col class="common-wrap" :span="12">
            <el-form
                ref="leftFormRef"
                style="width:100%"
                :model="leftForm"
                :rules="rules"
                label-width="auto"
            >
              <el-form-item label="术后送回" prop="gotoId">
                <el-radio-group v-model="leftForm.gotoId">
                  <el-radio v-for="item in end_surgery_go" :key="item.value" :value="item.value">{{
                      item.label
                    }}
                  </el-radio>

                </el-radio-group>
              </el-form-item>
              <el-form-item label="备注" prop="endRemark">
                <el-input v-model="leftForm.endRemark"/>
              </el-form-item>

              <el-form-item label="术后护理文书" prop="reportCount">
                <el-input v-model="leftForm.reportCount"/>
              </el-form-item>
              <el-form-item label=".">
                <div style="color:rgba(0,0,0,0.4)">
                  护理文书说明：护理记录单，物品清点单，三方核查单，高值耗材记录单，器材粘贴单
                </div>
              </el-form-item>

              <el-form-item label="是否介入/内镜手术" prop="hopsinfecPci">
                <el-radio-group v-model="leftForm.hopsinfecPci">
                  <el-radio value="0">是</el-radio>
                  <el-radio value="1">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="术前使用抗菌药物" prop="hopsinfecIsuseanti">
                <el-radio-group v-model="leftForm.hopsinfecIsuseanti">
                  <el-radio value="0">是</el-radio>
                  <el-radio value="1">否</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="手术分类" prop="count">
                <el-select-v2
                    v-model="leftForm.count"
                    placeholder="手术分类"
                    :options="surgery_oper_class"
                />
              </el-form-item>

              <el-form-item label="手术类型" prop="count">
                <el-select-v2
                    v-model="leftForm.count"
                    placeholder="手术类型"
                    :options="surgery_oper_type"
                />
              </el-form-item>

              <el-form-item label="感染情况" prop="count">
                <el-select-v2
                    v-model="leftForm.count"
                    placeholder="感染情况"
                    :options="surgery_hopsinfec_condition"
                />
              </el-form-item>

              <el-form-item label="手术实施科室" prop="count">
                <el-select-v2
                    v-model="leftForm.count"
                    placeholder="手术实施科室"
                    :options="[]"
                />
              </el-form-item>
              <el-form-item>
                <div style="display:flex;justify-content: flex-end;width:100%">
                  <el-button type="primary" @click="submitForm()">
                    保存
                  </el-button>
                </div>


              </el-form-item>
            </el-form>
          </el-col>
          <el-col class="common-wrap" :span="12">
            <div class="btns-wrap">
              <div class="btn-left">
                <el-button type="danger" @click="handleCancel()">取消手术</el-button>
                <el-button type="primary">恢复至待入室</el-button>
              </div>
              <div class="btn-right">
                <el-button @click="dialogVisible=true" type="success">出室</el-button>
              </div>
            </div>
            <el-table :data="tableData" border style="width: 100%;margin-top:12px">
              <el-table-column prop="date" label="序号"/>
              <el-table-column prop="name" label="描述"/>
              <el-table-column prop="address" label="操作"/>
              <el-table-column prop="结果" label="操作"/>
            </el-table>
          </el-col>

        </el-row>


      </div>

    </div>


    <el-dialog
        v-model="dialogVisible"
        title="出室时间"
        width="500"
    >
      <el-date-picker
          v-model="outTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          placeholder="出室时间"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sureOut()">
            确定出室
          </el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import dayjs from "dayjs";
import useSurgeryingStore from '@/store/modules/surgerying';
import {listUser} from "@/api/system/user";
import {listNursschedul, addNursschedul, delNursschedul} from "@/api/manage/nursschedul";
import {managesurgeryplanout} from "@/api/manage/surgeryplan";
import {updateSurgeryplan} from "../../api/manage/surgeryplan.js";
import {updateSurgeryworker} from "../../api/manage/surgeryworker.js";
import {cancelSurgeryplan} from "../../api/manage/endsurgery.js";

const {proxy} = getCurrentInstance();
const {
  end_surgery_go,
  surgery_oper_class,
  surgery_oper_type,
  surgery_hopsinfec_condition
} = proxy.useDict('end_surgery_go', 'surgery_oper_class', 'surgery_oper_type', 'surgery_hopsinfec_condition');

let eventList=JSON.parse(sessionStorage.getItem('shijianpeizhi'));
let eventTree= proxy.handleTree(eventList, "eventId", "parentId");
let outTime=ref();
let leftForm = reactive({
  surgeryId: useSurgeryingStore().surgerying.surgeryId,
  endTime: useSurgeryingStore().surgerying.endTime,
  gotoId: useSurgeryingStore().surgerying.gotoId,
  endRemark: useSurgeryingStore().surgerying.endRemark,
  reportCount: useSurgeryingStore().surgerying.reportCount,
  hopsinfecPci: useSurgeryingStore().surgerying.hopsinfecPci,
  hopsinfecIsuseanti: useSurgeryingStore().surgerying.hopsinfecIsuseanti,
  outTime: useSurgeryingStore().surgerying.outTime
})

// const leftForm = computed(() => {
//   return {
    
//       surgeryId: useSurgeryingStore().surgerying.surgeryId,
//       endTime: useSurgeryingStore().surgerying.endTime,
//       gotoId: useSurgeryingStore().surgerying.gotoId,
//       endRemark: useSurgeryingStore().surgerying.endRemark,
//       reportCount: useSurgeryingStore().surgerying.reportCount,
//       hopsinfecPci: useSurgeryingStore().surgerying.hopsinfecPci,
//       hopsinfecIsuseanti: useSurgeryingStore().surgerying.hopsinfecIsuseanti,
//       outTime: useSurgeryingStore().surgerying.outTime
//   }
// });


let dialogVisible = ref(false);
let locationOptions = [];
let tableData = ref([]);
let rules = ref([]);
onMounted(() => {

  //leftForm.surgeryId = useSurgeryingStore().surgerying.surgeryId;
});

function sureOut(){
 
  let event=eventList.filter(item=>{return item.eventCode==='CS'})[0]
  if(!event){
    proxy.$modal.msgWarning("系统未配置出室事件");
    return
  }
  
  let templateInfo=proxy.findNodeById(eventTree,event.eventId)
  managesurgeryplanout({
    eventId:event.eventId,
    eventName:event.eventName,
    surgeryId:useSurgeryingStore().surgerying.surgeryId,
    startTime:outTime.value,
    eventSurgeryDetailList:templateInfo.children.map(item=>{
        return {
          surgeryId:useSurgeryingStore().surgerying.surgeryId,
          value:outTime.value,
          eventName:item.eventName,
          eventId:item.eventId
        }
      })

  }).then(e=>{
    dialogVisible.value = false;
    proxy.$modal.msgSuccess("操作成功");
  })
}

/** 保存按钮 */
function submitForm() {
  proxy.$refs["leftFormRef"].validate(valid => {
    if (valid) {
      if (leftForm.surgeryId != null) {
        updateSurgeryplan(leftForm).then(response => {
          proxy.$modal.msgSuccess("修改成功");
        });
      }
    }
  });
}

function handleCancel() {
  console.log("取消")
  cancelSurgeryplan({
    surgeryId: leftForm.surgeryId,
    status: '-1'
  }).then(response => {
    proxy.$modal.msgSuccess("取消成功");
  })
}


</script>

<style lang="scss">
.margin-right12 {
  .el-form--inline .el-form-item {
    margin-right: 12px !important;
  }
}
</style>

<style lang="scss" scoped>

.flex-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 14px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .user-wrap {
    width: 25%;
    display: flex;
    align-items: center;
    margin-right: 8px;
  }

  .label {
    text-align: right;
    width: 105px;
  }

  .content {
    width: 70%;
  }
}

.app-container {
  height: 100%;
}

.main-page {
  height: 100%;
  display: flex;

  .left-part {
    box-sizing: border-box;
    padding-top: 10px;
    height: 100%;
    overflow: auto;
    margin-right: 18px;
  }

  .right-part {
    .common-wrap {
      border: 1px solid rgba(0, 0, 0, 0.2);
      padding: 20px 30px 0 20px;
    }

    .btns-wrap {
      display: flex;
      align-content: center;
      justify-content: space-between;
    }

    flex: 1;
    height: 100%;
    overflow: auto;
  }
}
</style>


  